<template>
	<view class="record-detail-page">
		<view class="head">
			<image class="bg" src="../static/record-detail-bg.png" mode="aspectFill"></image>
			<view class="content">
				<view class="txt">
					<text>{{detail.type}}</text>
				</view>
				<view class="title">
					<text>考评结果</text>
				</view>
				<view class="site">
					<image src="../static/location-white.png" mode="aspectFit"></image>
					<text>{{detail.title}}</text>
				</view>
				<view class="time">
					<text>考评员编号：{{detail.assessor_no}}</text>
					<text>{{detail.time}}</text>
				</view>
				<view class="progress">
					<u-circle-progress bg-color="rgba(0,0,0,0)" inactive-color="#ffffff" active-color="#87D5F2"
						:percent="detail.ratio">
						<view class="name">
							<text>{{detail.ratio_str}}</text>
						</view>
					</u-circle-progress>
				</view>
			</view>
		</view>

		<!-- 列表 -->
		<view class="list" v-for="item in detail.module" :key='item.module_id'>
			<view class="title">
				<view class="block"></view>
				<text class="t1">{{item.module_title}}</text>
				<text class="t2">{{item.module_score}}分</text>
			</view>
			<view class="score" v-for="item1 in item.subject" :key="item1.subject_id">
				<text class="t1">{{item1.subject_title}}</text>
				<text class="t2">{{item1.score}}</text>
				<view class="btn" @click="gotoRemark(item.module_id, item1.subject_id)">
					<text>详情</text>
				</view>
			</view>
		</view>

		<!-- 排名 -->
		<view class="list">
			<view class="title">
				<view class="block"></view>
				<text class="t1">本次排名</text>
			</view>
			<view class="ranking">
				<text>{{detail.evaluation_unit_region}}第</text>
				<text class="tc" style="width: 80rpx;">{{detail.rank}}</text>
				<text>名</text>
				<view class="space"></view>
				<image src="../static/ranking.png" mode="aspectFit"></image>
				<text style="margin-left: 10rpx;">排名</text>
				<text class="tc" style="margin-left: 10rpx;">{{detail.rank_up_down}}</text>
			</view>
		</view>

		<!-- 图表 -->
		<view class="list" style="margin-top: 20rpx;">
			<view class="title">
				<view class="block"></view>
				<text class="t1">四分类准确率</text>
			</view>

			<!-- 柱状图 -->
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
		</view>

		<!-- 图表 -->
		<view class="list" style="margin-top: 20rpx;">
			<view class="title">
				<view class="block"></view>
				<text class="t1">各板块得分</text>
			</view>

			<!-- 饼状图 -->
			<canvas canvas-id="canvasPie" id="canvasPie" class="charts-pie" @touchstart="touchPie"></canvas>
		</view>

		<!-- 分享按钮 -->
		<button class="share" open-type="share">
			<text>分享给朋友</text>
		</button>
	</view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaColumn = null;
	var canvaPie = null;

	export default {
		data() {
			return {
				detail: {},
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				piearr: []
			};
		},
		onLoad({ id }) {
			this.getDetail(id)
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
		},
		methods: {
			getDetail(id) {
				this.$u.post('/evaluationrecorddetail', { evaluation_record_id: id }).then(res => {
					this.detail = res

					// 处理柱状图数据
					let Column = { categories: [], series: [] };
					Column.series.push({
						name: '四分类准确率',
						data: [],
						color: '#3D99BB',
						format: function(v) {
							return v + '%'
						}
					})
					Column.series.push({
						name: '平均准确率',
						data: [],
						color: '#FFD400',
						format: function(v) {
							return v + '%'
						}
					})
					for (const key in res.four_data) {
						Column.categories.push(key)
						Column.series[0].data.push(parseInt(res.four_data[key].data))
						Column.series[1].data.push(parseInt(res.four_data[key].avg))
					}
					this.showColumn("canvasColumn", Column);

					// 处理饼状图数据
					let Pie = { series: [] };
					Pie.series = res.module_rate.map(v => {
						return {
							name: v.module_title,
							data: v.rate
						}
					})
					this.showPie("canvasPie", Pie);

					// 设置分享标题
					this.$u.mpShare.title = res.title
				}).catch(err => {
					console.log('getDetail-err', err);
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				})
			},

			touchColumn(e) {
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					}
				});
			},

			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: { show: true },
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						data: [{
							min: 0,
							format: function(v) {
								return v + '%'
							}
						}]
						//disabled:true
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					padding: [30, 15, 4, 15],
					extra: {
						column: {
							type: 'group',
							width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						}
					}
				});
			},

			showPie(canvasId, chartData) {
				canvaPie = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					legend: {
						show: true,
						position: 'left',
						float: 'center',
						itemGap: 10,
						padding: 5,
						lineHeight: 26,
						margin: 5,
						borderWidth: 1
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: uni.upx2px(690) * _self.pixelRatio,
					height: uni.upx2px(400) * _self.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
							labelWidth: 15
						}
					},
				});
				this.piearr = canvaPie.opts.series;
			},

			touchPie(e) {
				canvaPie.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			},

			gotoRemark(module_id, subject_id) {
				const evaluation_sheet_id = this.detail.evaluation_sheet_id
				let url = '../mark-detail/mark-detail'
				url = `${url}?evaluation_sheet_id=${evaluation_sheet_id}`
				url = `${url}&module_id=${module_id}`
				url = `${url}&subject_id=${subject_id}`
				uni.navigateTo({ url })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.record-detail-page {

		.head {
			position: relative;
			width: 750rpx;
			height: 570rpx;

			>.bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 750rpx;
				height: 570rpx;
				z-index: 1;
			}

			>.content {
				position: absolute;
				top: 0;
				left: 0;
				width: 750rpx;
				height: 570rpx;
				z-index: 2;
				
				>.txt {
					display: flex;
					margin-top: 30rpx;
					padding: 0 30rpx;
					height: 50rpx;
					>text {
						margin-left: 12rpx;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 50rpx;
						color: #FFFFFF;
					}
				}

				>.title {
					margin-top: 26rpx;
					font-size: 36rpx;
					font-weight: bold;
					line-height: 50rpx;
					color: #FFFFFF;
					text-align: center;
				}

				>.site {
					display: flex;
					align-items: center;
					padding: 0 30rpx;
					margin-top: 22rpx;

					>image {
						width: 24rpx;
						height: 26rpx;
					}

					>text {
						margin-left: 12rpx;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
						color: #FFFFFF;
					}
				}

				>.time {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30rpx;
					margin-top: 16rpx;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: #FFFFFF;
				}

				>.progress {
					margin-top: 22rpx;
					display: flex;
					justify-content: center;

					.name {
						font-size: 32rpx;
						font-weight: 400;
						line-height: 44rpx;
						color: #FFFFFF;
					}
				}
			}
		}

		>.list {
			>.title {
				height: 84rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;
				line-height: 44rpx;
				color: #131415;

				>.block {
					width: 8px;
					height: 32px;
					background: #3D99BB;
					border-radius: 8px;
				}

				>.t1 {
					width: 500rpx;
					margin-left: 18rpx;
				}
			}

			>.score {
				height: 100rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				background-color: white;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: #131415;

				>.t1 {
					flex: 1;
				}

				>.t2 {
					width: 100rpx;
					text-align: center;
				}

				>.btn {
					width: 80rpx;
					height: 46rpx;
					background: #3D99BB;
					border-radius: 4rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 46rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}

			>.ranking {
				margin-top: 16rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 40rpx;
				color: #131415;
				text-align: center;

				.tc {
					color: #3D99BB;
				}

				>image {
					width: 26rpx;
					height: 28rpx;
				}
			}

			>.charts {
				width: 750rpx;
				height: 500rpx;
			}

			>.charts-pie {
				width: 690rpx;
				height: 400rpx;
				margin: 28rpx auto 0 auto;
				border-radius: 10rpx;
				background-color: white;
			}
		}

		>.share {
			width: 690rpx;
			height: 100rpx;
			margin: 70rpx auto;
			border: 2px solid #3D99BB;
			border-radius: 50rpx;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 100rpx;
			color: #3D99BB;
			text-align: center;
			transform: scale(1);
			transition: transform 0.1s linear;

			&:active {
				transform: scale(0.9)
			}
		}
	}
</style>
